<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="/heatweet/resources/css/smoothness/jquery-ui-1.8.16.custom.css"
	media="all">
<!-- <link rel="stylesheet" type="text/css"
	href="/heatweet/resources/css/jslider.css" media="all">
<link rel="stylesheet" type="text/css"
	href="/heatweet/resources/css/jslider.round.css" media="all"> -->

<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
	src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/heatweet/resources/js/heatmap.js">
	
</script>
<!-- <script type="text/javascript"
	src="/heatweet/resources/js/jquery.slider-min.js"></script>
<script type="text/javascript"
	src="/heatweet/resources/js/jquery.dependClass.js"></script> -->
<script type="text/javascript"
	src="/heatweet/resources/js/heatmap-gmaps.js"></script>
<style type="text/css" media="screen">
.layout {
	padding: 50px;
	font-family: Georgia, serif;
}

.layout-slider {
	margin: 10px;
	width: 20%;
}

.layout-slider-settings {
	font-size: 12px;
	padding-bottom: 10px;
}

.layout-slider-settings pre {
	font-family: Courier;
}
</style>
<script type="text/javascript">
	var map;
	var G = google.maps;
	var geocoder;
	var ret;
	var max = 0;
	var d
	$(document).ready(initialize);
	function initialize() {
		d = new Array();
		$("#layout-slider").hide();
		geocoder = new google.maps.Geocoder();
		var latlng = new google.maps.LatLng(28.54, -43.13);
		var myOptions = {
			zoom : 3,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);

	}

	function code(address, heatmap, count) {
		ret = geocoder.geocode({
			'address' : address
		}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				var latlng = results[0].geometry.location;
				var lat = latlng.toString().split(',')[0];
				lat = lat.substr(1);
				var lng = latlng.toString().split(',')[1];
				lng = lng.substr(1, lng.length - 2);
				heatmap.addDataPoint(lat, lng, count);

			} else {
				alert("Geocode was not successful for the following reason: "
						+ status);
			}
		});

	}
	function codeAddress() {
		var address = $("#local").value;
		geocoder.geocode({
			'address' : address
		}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				var latlng = results[0].geometry.location;
				var lat = latlng.toString().split(',')[0];
				lat = lat.substr(1);
				var lng = latlng.toString().split(',')[1];
				lng = lng.substr(1, lng.length - 2);

				var myOptions = {
					zoom : 6,
					center : results[0].geometry.location,
					mapTypeId : google.maps.MapTypeId.ROADMAP
				};
				map = new google.maps.Map($("#map_canvas"), myOptions);
				var marker = new google.maps.Marker({
					map : map,
					position : results[0].geometry.location

				});

			} else {
				alert("Geocode was not successful for the following reason: "
						+ status);
			}
		});
	}
	var data;
	function addPoints() {
		var url = "/heatweet/rest/fusion/selectByLocationByDate?table=2228251";
		//var url = "/heatweet/fusion/selectByLocation?table=2228856";
		var url2 = "/heatweet/rest/fusion/selectDates?table=2228251";
		var heatmap = new HeatmapOverlay(map, {
			"radius" : 15,
			"visible" : true,
			"opacity" : 60
		});
		var dados;
		var request = $.ajax({
			url : url2,
			type : "GET",
			datatype : "text"

		});
		var center = true;
		request.done(function(response) {
			datas = response.split(";");
			$.each(datas, function(index, item) {

				if (index != 0) {

					var request2 = $.ajax({
						url : url + "&date="
								+ encodeURIComponent(item.split(",")[0]),
						type : "GET",
						datatype : "text"
					});

					request2.done(function(response) {
						dados = response.split(";");
						$.each(dados, function(index, item) {
							if (index != 0) {
								local = item.split(",")[0].toString().replace(
										"\"", "").replace(",", " ");
								count = item.split(",")[1];
								/*if (center) {
									var latlng = new google.maps.LatLng(local.split(" ")[0],local
											.split(" ")[1]);
									map.setCenter(latlng);
									center = false;
								}*/

								heatmap.addDataPoint(local.split(" ")[0], local
										.split(" ")[1], count);

							}
						});
					});

				}
			});

		});

	}
	function addData(event, ui) {
		var url = "/heatweet/rest/fusion/selectByLocationByMaxDate?table=2228251";
		for (i = 0; i < ui.value; i++) {
			var request2 = $.ajax({
				url : url + "&date=" + encodeURIComponent(d[i]),
				type : "GET",
				datatype : "text"
			});
		}
		request2.done(function(response) {
			dados = response.split(";");
			$.each(dados, function(index, item) {
				if (index != 0) {
					local = item.split(",")[0].toString().replace("\"", "")
							.replace(",", " ");
					count = item.split(",")[1];
					/*if (center) {
						var latlng = new google.maps.LatLng(local.split(" ")[0],local
								.split(" ")[1]);
						map.setCenter(latlng);
						center = false;
					}*/

					heatmap.addDataPoint(local.split(" ")[0],
							local.split(" ")[1], count);

				}
			});
		});
	}

	function addPoints2() {

		//var url = "/heatweet/fusion/selectByLocation?table=2228856";
		var url2 = "/heatweet/rest/fusion/selectDates?table=2228251";
		var heatmap = new HeatmapOverlay(map, {
			"radius" : 15,
			"visible" : true,
			"opacity" : 60
		});
		var dados;
		var request = $.ajax({
			url : url2,
			type : "GET",
			datatype : "text"

		});

		request.done(function(response) {
			datas = response.split(";");
			$("#layout-slider").show();

			$.each(datas, function(index, item) {

				if (index != 0) {
					d[index - 1] = item.split(",")[0];

				}
			});
			$( "#slider" ).slider({
				value:1,
				min: 1,
				max: d.length +1,
				step: 1,
				slide: function(event,ui){
					var url = "/heatweet/rest/fusion/selectByLocationByMaxDate?table=2228251";
					for (i = 0; i < ui.value; i++) {
						var request2 = $.ajax({
							url : url + "&date=" + encodeURIComponent(d[i]),
							type : "GET",
							datatype : "text"
						});
					}
					$("#dataFinal").val(d[ui.value-1]);
					request2.done(function(response) {
						dados = response.split(";");
						$.each(dados, function(index, item) {
							if (index != 0) {
								local = item.split(",")[0].toString().replace("\"", "")
										.replace(",", " ");
								count = item.split(",")[1];
								/*if (center) {
									var latlng = new google.maps.LatLng(local.split(" ")[0],local
											.split(" ")[1]);
									map.setCenter(latlng);
									center = false;
								}*/

								heatmap.addDataPoint(local.split(" ")[0],
										local.split(" ")[1], count);

							}
						});
					});
				}
			});		
			$("#dataInicial").val(d[0]);
			
			/*
			$("#slider").slider({
				from : 1,
				to : d.length + 1,
				step : 1,
				round : 1,
				dimension : '&nbsp;',
				skin : "round",
				onstatechange : addData(value)
			});*/
		});
	}
</script>
<title>HeaTweet</title>
</head>
<body class="ui-widget ui-widget-content ui-corner-all">
	<form id="frm">
		<div>
			<div id="top" class="ui-widget-header">
				<button type="button" onclick="addPoints2();"
					class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
					<span class="ui-button-text">Carregar Op&ccedil;&otilde;es</span>
				</button>								
				<div class="layout-slider" id="layout-slider">
					<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">						
					</div>
					Tweets sobre occupy de:
				<input type="text" id="dataInicial" /> a <input type="text" id="dataFinal" />
					<!-- <input id="slider" onchange="alert($('this.value'))" type="slider"
						value="1" /> -->
				</div>
			</div>
			<div class="ui-widget-content">
				<div id="map_canvas" style="height: 600px; width: 100%"></div>
			</div>
		</div>



	</form>
</body>
</html>
